<template>
	<view class="avatar-wrap" :style="{backgroundColor: backgroundColor}">
		<text>{{ props.txt }}</text>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { AVATAR_BACK_COLOR_DICT }  from './constant.js'
	
	const props = defineProps({
		txt: String
	})
	
	const backgroundColor = computed(() => {
		return AVATAR_BACK_COLOR_DICT[props.txt]
	})
</script>

<style lang="scss" scoped>
	.avatar-wrap {
		height: 80upx;
		width: 80upx;
		background-color: black;
		border-radius: 50%;
		color: #fff;
		font-size: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>